<script setup>
const activeIndex = "1";
import { computed } from 'vue';
import { useUserStore } from '../stores/userStore';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const router = useRouter();

// 使用计算属性保持响应式
const isLogin = computed(() => userStore.isLoggedIn);
const nickname = computed(() => userStore.userInfo.nickname);
const avatarUrl = computed(() => userStore.userInfo.avatarUrl);

const goToLogin = () => {
  router.push('/login');
};

const goToProfile = () => {
  router.push('/user');
};
</script>

<template>
  <el-container>
    <el-header style="background-color: white; width: 100%; height: 60px;">
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="4" style="display: flex; align-items: center;">
          <img src="/images/logo.png" style="height: 40px;">
          <h2 style="padding-left: 10px; margin: 0;">双碳招投标网</h2>
        </el-col>
        <el-col :span="12">
          <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none; display: flex; justify-content: center;">
            <el-menu-item index="1">
              <router-link to="/platform">平台动态</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/policies">政策法规</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="/complaints">违规投诉</router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4" style="text-align: right; height: 60px; line-height:60px;" class="hidden-xs-only">
          <div v-if="!isLogin">
            <el-link type="primary" @click="goToLogin">
              登录
            </el-link>
            <el-link type="primary" style="padding-left: 4px;" @click="router.push('/reg')">
              注册
            </el-link>
          </div>
          <div v-else>
            <el-avatar :size="40" :src="avatarUrl" style="vertical-align: middle; cursor: pointer;" @click="goToProfile"></el-avatar>
            <el-link type="primary" style="padding-left: 4px;" @click="goToProfile">
              {{ nickname }}
            </el-link>
          </div>
        </el-col>
      </el-row>
    </el-header>
  </el-container>
</template>

<style scoped>
/* 添加一些样式以匹配设计图 */
</style>